<!-- 药品管理 -->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:30px;">药品管理</span>
  </div>
  <!--  药品卡片表 -->
  <el-card style="margin: 20px;height: 70px">
    <el-form>
      <el-form-item>
        <el-radio-group v-model="type" @change="loadInv">
          <el-radio-button value="1" @click="reset">全部</el-radio-button>
          <el-radio-button value="2" @click="invSearchFrom.stock='充足'">充足</el-radio-button>
          <el-radio-button value="3" @click="invSearchFrom.stock='短缺'">短缺</el-radio-button>
          <el-radio-button value="4" @click="invSearchFrom.stock='过剩'">过剩</el-radio-button>
        </el-radio-group>
        <el-select placeholder="请选择药品类型" style="width: 350px; margin-left: 10px"
                   v-model="invSearchFrom.drugCategory">
          <el-option label="甲类" @click="invSearchFrom.drugCategory='甲类'"></el-option>
          <el-option label="乙类" @click="invSearchFrom.drugCategory='乙类'"></el-option>
        </el-select>
        <el-input placeholder="输入药品名称" v-model="invSearchFrom.drugName"
                  style="width: 350px; margin-left: 10px"></el-input>
        <el-button style="margin-left: 10px" @click="loadInv">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 药品信息表格 -->
  <el-card style="margin: 20px; ">
    <el-table :data="invArr">
      <el-table-column prop="id" label="药品ID" ></el-table-column>
      <el-table-column prop="drugName" label="药品名称" ></el-table-column>
      <el-table-column prop="drugCategory" label="类别" ></el-table-column>
      <el-table-column prop="specification" label="规格"></el-table-column>
      <el-table-column prop="purchasePrice" label="采购单价" ></el-table-column>
      <el-table-column prop="salePrice" label="销售单价" ></el-table-column>
      <el-table-column prop="stock" label="库存情况"></el-table-column>
      <el-table-column prop="batchNumber" label="生产批次" ></el-table-column>
      <el-table-column prop="expiryDate" label="有效期至"></el-table-column>
      <el-table-column prop="manufacturer" label="生产厂家"></el-table-column>
      <el-table-column prop="operate" label="操作" >
        <template #default="scope">
          <el-button type="text" @click="InveDialogVisible(scope.row)">详情</el-button>
          <el-button type="text" @click="">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog :title="dialogTitle" v-model="InvDialogVisible">
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="药品名称">{{invDetail.drugName}}</el-descriptions-item>
      <el-descriptions-item label="药品规格">{{invDetail.specification}}</el-descriptions-item>
      <el-descriptions-item label="生产厂家">{{invDetail.manufacturer}}</el-descriptions-item>
      <el-descriptions-item label="生产批次">{{invDetail.batchNumber}}</el-descriptions-item>
      <el-descriptions-item label="有效期至">{{invDetail.expiryDate}}</el-descriptions-item>
      <el-descriptions-item label="库存">{{invDetail.stock}}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>

</template>

<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
const type=ref('1')
//定义对象保存查询条件
const invSearchFrom = ref({stock: '', drugCategory: '', drugName: ''});
//一进到页面，立即加载所有药品
onMounted(() => {
  loadInv();
})
//定义数组保存用户列表信息
const invArr = ref([]);
//加载药品信息
const loadInv = () => {
  let data = qs.stringify(invSearchFrom.value);
  console.log(data);
  //如果有查询条件根据条件查，如果没有默认查全部
  axios.post(BASE_URL + "v1/inventory/select?" + data).then((response) => {
    //如果后端返回状态码为2000，则说明请求成功
    if (response.data.code == 2000) {
      invArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//点击重置按钮清空搜索框，加载所有数据
const reset = () => {
  invSearchFrom.value = {stock: '', drugCategory: '', drugName: ''};
  loadInv();
}
//控制药品弹窗标题
const dialogTitle = ref("药品详情");
//控制详情弹窗是否显示
const InvDialogVisible = ref(false);
//定义对象用来保存药品详情弹窗数据
const invDetail = ref({
  drugName:'',//药品名称
  expiryDate:'',//有效期
  manufacturer:'',//生产厂家
  batchNumber:'',//生产批次
  stock:'',//库存情况
  specification:''//规格
});
//点击详情按钮显示药品详情弹窗
const InveDialogVisible = (row) => {
  invDetail.value = row;
  dialogTitle.value = "药品详情";
  InvDialogVisible.value = true;
}
//定义管理弹窗新增药品信息
</script>

<style scoped>

</style>